<template>
	<view class="page_wrapper page_bg">
		<view class="menus_block">
			<view class="menus_wrapper">
				<view class="menu" @click="changeStatus('最近一周')" :class="{'active' : queryForm.dateType === '最近一周'}">
					最近一周
				</view>
				<view class="menu center_menu" @click="changeStatus('最近一月')" :class="{'active' : queryForm.dateType === '最近一月'}">
					最近一月
				</view>
				<view class="menu" @click="changeStatus('今年')" :class="{'active' : queryForm.dateType === '今年'}">
					今年
				</view>
			</view>
		</view>
		<view class="stat_by_date_block">
			<view class="count_block total_count_block">
				<view class="count_title">做题量</view>
				<view class="count_value">{{statData.toc}}</view>
			</view>
			<view class="count_block right_count_block">
				<view class="count_title">正确题量</view>
				<view class="count_value">{{statData.rc}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {request} from '@/utils/request.js'
	export default {
		data() {
			return {
				queryForm: {
					dateType: '最近一月',
					pageNo: 1,
					pageSize: 20
				},
				statData: {}
				
			}
		},
		onLoad() {
			this.fetchData()
		},
		onReady() {
			// this.getServerData()
		},
		methods: {
			fetchData() {
				// uni.showLoading()
				// request.get( 
				// 	'/mathExams/stat', 
				// 	{
				// 		'dateType' : this.queryForm.dateType
				// 	}
				// ).then(res => {
				// 	uni.hideLoading()
				// 	console.log(res)
				// 	this.statData = res
				// }).catch(err => {
				// 	uni.hideLoading()
				// 	console.log(err)
				// })
			},
			changeStatus(menu) {
				this.queryForm.dateType = menu
				this.fetchData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_wrapper{
		.menus_block{
			height: 40px;
			margin-top: 30px;
			display: flex;
			justify-content: center;
			.menus_wrapper{
				width: 300px;
				border: 1px solid coral;
				display: flex;
				.menu{
					
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.center_menu{
					border-left: 1px solid coral;
					border-right: 1px solid coral;
				}
				.menu.active{
					color: white;
					background-color: coral;
				}
			}
			
		}
		.stat_by_date_block{
			padding: 20px;
			display: flex;
			justify-content: space-around;
			.count_block{
				color: white;
				width: 150px;
				display: flex;
				flex-direction: column;
				border-radius: 10px;
				margin: 20px 10px;
				padding: 20px 5px;
				.count_title{
					padding-left: 10px;
					font-size: 15px;
					font-weight: 500;
				}
				.count_value{
					font-size: 23px;
					margin-top: 10px;
					display: flex;
					justify-content: center;
				}
			}
			.total_count_block{
				background-color: #409EFF;
			}
			
			.right_count_block{
				background-color: #E6A23C;
			}
		}
	}
</style>
